<template>
    <div class="person">
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showPos">查看位置</button>
    </div>
</template>

<script lang="ts">
    export default {
        name: 'Person',
        data(){
            return{
                name:'zzq',
                age:28,
                position:'PF'
            }
        },
        methods:{
            showPos(){
                alert(this.position)
            },
            changeName(){
                this.name = 'zm'
            },
            changeAge(){
                this.age --
            }
        }

    }
</script>

<style scoped>
    .person{
        background-color: #c495ea;
        border-radius: 10px;
        box-shadow: 0 0 10px;
        padding: 20px;
        margin: 10px 0;
    }
</style>